/* Res
et */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}


	ul, li {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}


	#wrapper {
	  margin: auto;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: center;
	  -webkit-align-items: center;
	      -ms-flex-align: center;
	          align-items: center;
	  -webkit-box-pack: left;
	  -webkit-justify-content: left;
	      -ms-flex-pack: left;
	          justify-content: left;
	  overflow: hidden;
	}

	#left-side {
	  height: 100%;
	  width: 25%;
	  background:#fff;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: center;
	  -webkit-align-items: center;
	      -ms-flex-align: center;
	          align-items: center;
	  -webkit-box-pack: center;
	  -webkit-justify-content: center;
	      -ms-flex-pack: center;
	          justify-content: center;
	}
	#left-side ul{
		height:570px;
		width:100%;
		
		}
	
	
	#left-side ul li {
	  padding-top: 10px;
	  padding-bottom: 10px;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	  line-height: 34px;
	  font-weight: 500;
	  border-bottom:1px solid #dbdbdb;
	  text-align:center;
	  color:#404040;
	  padding-left:36%;
	}
	#left-side ul li:hover {
	  color: #6f6f6f;
	}
	#left-side ul li:hover > .icon {
	  fill: #333;
	}
	#left-side ul li.active {
	  color: #e84a7b;
	  border-left:3px solid #e84a7b;
	  background:#eee;
	  text-align:center;
	  
	}
	#left-side ul li.active:hover > .icon {
	  fill: #E74C3C;
	}



	#right-side {
	  width: 75%;
	  display:block;
	  margin-top:-525px;
	  color:#6f6f6f;
	}
	#right-side #first, #right-side #second, #right-side #third, #right-side #fourth {
	  position: absolute;
	  height: 300px;
	  width: 75%;
	  opacity: 0;
	padding-left:10px;
	}
	#right-side #first li, #right-side #second li, #right-side #third li, #right-side #fourth li {
		float:left;
		width:30%;
		margin-right:3%;
		margin-bottom:10px;
		}
	
	#right-side #first li img, #right-side #second li img, #right-side #third li img, #right-side #fourth li img {
		width:100%;
		border-radius:5px;
		}
	
	

	#right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p {
	  color: #6f6f6f;
	  font-weight: 500;
	  padding-left: 15px;
	}
	#right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {
	  margin-top: 0px;
	  opacity: 1;

	}
